<template>
  <div class="app-container">
    <!-- 图片素材新增 -->
    <h5 class="titleInfo">基础数据</h5>
    <el-form ref="form" :inline="true" :model="form" label-width="130px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="图片描述">
            <el-input v-model="form.title" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="分享描述">
            <el-input v-model="form.shareDesc" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属分类">
            <el-select v-model="form.type" placeholder="请选择" clearable>
              <el-option
                v-for="item in typeList"
                :key="item.type"
                :label="item.name"
                :value="item.type"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属省份">
            <el-select v-model="form.province" placeholder="请选择" clearable>
              <el-option label="全国" :value="0" />
              <el-option
                v-for="item in options"
                :key="item.path"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="排序">
            <el-input v-model="form.sort" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="封面图">
            <newUpload ref="uploadImg" :fileNum="fileNum" :width="-1" :height="-1" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="素材图">
            <newUpload ref="uploadImg1" :fileNum="fileNum" :width="-1" :height="-1" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="状态">
            <el-switch
              v-model="form.status"
              active-text="正常"
              inactive-text="下架"
              active-color="#13ce66"
              inactive-color="#eee"
              :active-value="0"
              :inactive-value="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否推荐">
            <el-switch
              v-model="form.isRecom"
              active-text="推荐"
              inactive-text="不推荐"
              active-color="#13ce66"
              inactive-color="#eee"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 二维码参数 -->
      <div class="divBar" />
      <h5 class="titleInfo">二维码参数</h5>
      <el-row>
        <el-col :span="24">
          <el-form-item label="左边距">
            <el-input v-model="form.json.qr.left" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上边距">
            <el-input v-model="form.json.qr.top" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="二维码大小">
            <el-input v-model="form.json.qr.wh" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button
          style="margin-top:30px;margin-left:130px"
          type="primary"
          @click="submitFn('form')"
        >立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import newUpload from "@/components/imgUpload/index";
import { materialPhotoLisAdd } from "@/api/materialPhoto";
import { materialtypeList } from "@/api/materialPlace";
import { regionDropDown } from "@/api/area";
export default {
  name: "MaterialPhotoAdd",
  components: { newUpload },
  filters: {},
  data() {
    return {
      typeList: [],
      fileNum: 1,
      options: [],
      form: {
        sort: null,
        title: "",
        type: null,
        miniUrl: "",
        url: "",
        status: null,
        province: null,
        isRecom: null,
        shareDesc: "",
        json: {
          qr: {
            left: "",
            top: "",
            wh: ""
          },
          jump: {type:'1',target:'0'}
        }
      }
    };
  },
  mounted() {
    this.getArea();
    this.getTypeList();
  },
  methods: {
    //获取类型下拉列表
    getTypeList() {
      let datas = {};
      materialtypeList(datas).then(res => {
        this.typeList = res.data.data;
      });
    },
    // 省市区
    getArea() {
      regionDropDown().then(res => {
        const newArr = [];
        res.data.data.forEach((item1, index) => {
          newArr.push({
            value: item1.id,
            label: item1.name
          });
        });
        this.options = newArr;
      });
    },
    // 提交
    submitFn(e) {
      this.form.miniUrl = this.$refs.uploadImg.submitUpload();
      this.form.url = this.$refs.uploadImg1.submitUpload();
      this.form.miniUrl = this.form.miniUrl.join(",");
      this.form.url = this.form.url.join(",");
      if (!this.form.json.qr) {
        this.form.json = {
          qr: {
            left: "",
            top: "",
            wh: ""
          },
          jump: {type:'1',target:'0'}
        };
      }
      const datas = this.form;
      materialPhotoLisAdd(datas).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          this.$router.push({path:"/materialPhotoIndex"});
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
</style>
